from nicegui import ui, app, context
from starlette.routing import Route
from typing import Literal
from typing import cast
from niceguiToolkit.layout import inject_layout_tool
from ex4nicegui.reactive import rxui
from ex4nicegui import to_ref, ref_computed, effect, effect_refreshable


def view_topic():
    return {
        1: ["计算两个数的和", "编写一个程序，计算两个数的和。示例：2 + 3 = 5"],
        2: ["判断一个数是否是偶数", "编写一个程序，判断一个数是否是偶数。示例：2 是偶数，3 是奇数"],
        3: ["判断一个数是否是质数", "编写一个程序，判断一个数是否是质数。示例：2 是质数，4 不是质数"],
        4: ["计算列表中所有数字的和", "编写一个程序，计算列表中所有数字的和。示例：[1, 2, 3, 4, 5] 的和为 15"],
        5: ["反转一个字符串", "编写一个程序，反转一个字符串。示例：'hello' 反转后为 'olleh'"],
        6: ["检查一个字符串是否是另一个字符串的子序列",
            "编写一个程序，检查一个字符串是否是另一个字符串的子序列。示例：'he' 是 'hello' 的子序列"],
        7: ["生成斐波那契数列的前n个数字",
            "编写一个程序，生成斐波那契数列的前n个数字。示例：前10个斐波那契数为 [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]"],
        8: ["判断一个数是否是另一个数的倍数",
            "编写一个程序，判断一个数是否是另一个数的倍数。示例：6 是 2 的倍数，但不是 3 的倍数"],
        9: ["将一个温度从摄氏度转换为华氏度",
            "编写一个程序，将一个温度从摄氏度转换为华氏度。示例：25摄氏度转换为华氏度为 77.00"],
        10: ["找到列表中的最大和最小元素",
             "编写一个程序，找到列表中的最大和最小元素。示例：[5, 2, 9, 1, 5] 的最大元素为 9，最小元素为 1"]
    }


@ref_computed
def topic_list():
    new_dict = {}
    for key, value in topics.value.items():
        if value[0].find('') >= 0:
            new_dict[key] = value
    return list(new_dict.items())


topics = to_ref(view_topic())

topic_pagination = rxui.use_pagination(topic_list, page_size=12)


with ui.grid(columns=6):
    @effect_refreshable
    def _():
        for l in topic_pagination.current_source.value:
            with ui.card().classes('w-[15rem] h-[7rem]'):
                with ui.grid(columns=2):
                    ui.label('id'), ui.label(l[0])
                    ui.label('title'), ui.label(l[1][0])
                    with ui.context_menu():
                        ui.menu_item('改变题目', on_click=lambda: {print('l[0]:', l[0]),ui.notify(l[0])})


topic_pagination.create_q_pagination().classes('w-full')
ui.run()
